.@{mi-canvas} {
	&-layers {
		&-list {
			&-item {
				&#mi-canvas-paint-bucket {
					height: 82px;
					.@{mi-canvas}-layers-list-thumbnail-bg {
						height: 50px;
						cursor: pointer;
						i.iconfont {
							width: 30px;
							height: 30px;
							box-shadow: none;
							position: absolute;
							left: 35px;
							top: 10px;
							color: @white;
							background-color: #20212480;
							border-radius: 50%;
							font-size: 20px;
							.flex();
						}
						.@{mi-canvas}-paint-bucket {
							height: 50px;
						}
					}
				}
			}
		}

		.@{mi-canvas} {
			&-palette {
				transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
				will-change: transform;

				&-box {
					.@{poptip-prefix-cls} {
						&-body {
							padding: 0;
						}
					}

					.@{tabs-prefix-cls} {
						padding: 32px 32px 0 32px;
					}
				}

				.@{mi-canvas}-layers-title {
					justify-content: flex-start;
					padding: 16px;
					i.@{icon-prefix-cls} {
						margin-right: 8px;
					}
				}

				.@{tabs-prefix-cls} {
					padding: 0 20px;
				}

				&-default {
					width: 288px;
					position: absolute;
					margin-top: 4px;
				}

				&-swatches {
					display: grid;
					grid-auto-rows: 64px;
					grid-template-columns: repeat(6, 48px);
				}

				&-color {
					.flex();
					width: 100%;
					height: 100%;

					.@{radio-prefix-cls} {
						opacity: 0;
						margin-right: 0;
						width: 24px;
						height: 24px;
						position: absolute;
						transform: translate(-5px, -3px);
						&-wrapper {
							margin-right: 0;
							.flex();

							.@{tooltip-prefix-cls} {
								.flex();
							}
						}
					}

					&-item {
						width: 24px;
						height: 24px;
						position: relative;
						box-sizing: border-box;
						cursor: pointer;
						border-radius: 50%;
						-webkit-tap-highlight-color: transparent;
						display: block;
						transition: all .2s ease-in-out;
						&[name="#ffffff"] {
							border: 1px solid #E8EAED;
						}
					}

					.@{radio-prefix-cls} {
						&-checked + span.@{mi-canvas}-palette-color-item {
							width: 36px;
							height: 36px;
							box-shadow: 0 0 10px #969696;
						}
					}
				}

				&-picker {
					width: 288px !important;
					.border-radius(2) !important;
					outline: none;
					box-shadow: none !important;

					.vc-chrome {
						padding: 0 4px;
					}

					.vc-chrome-saturation-wrap {
						.border-radius(2);

						.vc-saturation {
							.border-radius(2.5);
						}

						.vc-saturation-circle {
							width: 24px;
							height: 24px;
							box-shadow: 0 0 0 4px #FFF, 0 0 0 5px #1A73EB, 0 0 rgba(0, 0, 0, 0);
						}
					}

					.vc-chrome-body {
						padding: 24px 0;
					}

					.vc-chrome-active-color,
					.vc-chrome-color-wrap .vc-checkerboard {
						width: 24px;
						height: 24px;
					}

					.vc-chrome-color-wrap {
						display: none;
					}

					.vc-chrome-hue-wrap {
						margin-bottom: 0;
						height: 24px;

						.vc-hue {
							.border-radius(2);
						}

						.vc-hue-picker {
							width: 24px;
							height: 24px;
							.border-radius(6);
							background: transparent;
							box-shadow: 0 0 0 4px #FFF, 0 0 0 5px #1A73EB, 0 0 rgba(0, 0, 0, 0);
							transform: translate(0, -1px);
							-webkit-appearance: none;
							appearance: none;
							-webkit-tap-highlight-color: transparent;
							border: initial;
						}

						.vc-hue--horizontal {
							background: linear-gradient(to right, #FF0000 4.17%, #FFFF00 19.44%, #00FF00 34.72%, #00FFFF 50%, #0000FF 65.28%, #FF00FF 80.56%, #FF0000 95.83%);

							.vc-hue-container {
								width: 260px;
							}
						}
					}
					.vc-chrome-alpha-wrap {
						display: none;
					}

					.vc-chrome-toggle-btn {
						display: none;
					}

					.vc-chrome-fields-wrap {
						margin-top: 8px;
					}

					.vc-chrome-fields  {
						.vc-input__input {
							background: #F1F3F3;
							height: 30px;
							box-shadow: none;
							outline: none;
							.border-radius(2);
						}
						.vc-input__label {
							display: none;
						}
					}
				}
			}
		}
	}
}
